<template>
  <div class="box">
    <van-nav-bar class="top" fixed placeholder title="网易严选">
      <template #left>
        <van-icon
          style="margin-left: 50px"
          color="#666"
          name="wap-home-o"
          size="20"
          @click="goto('/home')"
        />
      </template>
      <template #right>
        <van-icon
          style="margin-right: 10px"
          color="#666"
          name="search"
          size="20"
          @click="goto('/search')"
        />
        <van-icon
          style="margin-right: 50px"
          color="#666"
          name="shopping-cart-o"
          size="20"
          @click="goto('/cart')"
        />
      </template>
    </van-nav-bar>
    <h1>推荐关注</h1>
    <div class="food">
      <van-list
        v-model="loading"
        :finished="finished"
        :offset="100"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell>
          <van-row type="flex">
            <van-col
              span="12"
              style="text-align: center; margin-bottom: 18px"
              v-for="item in list"
              :key="item.goods_id"
              @click="gotoDetails(item.goods_id)"
              ><van-image
                width="180"
                height="180"
                :src="item.goods_small_logo"
              />
              <div class="title van-multi-ellipsis--l2">
                {{ item.goods_name }}
              </div>
              <div class="price">
                <span class="new">{{ item.goods_price }}</span>
                <del class="old">75</del>
              </div>
              <div class="manjian">满99减30元</div>
            </van-col>
          </van-row>
        </van-cell>
      </van-list>
    </div>
  </div>
</template>
<script>
export default {
  name: "Category",
  data() {
    return {
      list: [],
      page: 1,
      loading: false,
      finished: false,
      cat_one_id: "",
    };
  },
  watch: {
    cat_one_id: function (n, o) {
      this.page = 1;
      this.list = [];
    },
  },
  created() {
    const { cat_one_id } = this.$route.query;
    this.cat_one_id = cat_one_id;
  },
  methods: {
    rander() {},
    onLoad() {
      if (!this.finished) {
        this.getdata();
      }
    },
    async getdata() {
      this.loading = true;
      this.finished = false;
      const {
        data: { data },
      } = await this.$request.get("/api/goods", {
        params: {
          page: this.page,
          cat_one_id: this.cat_one_id,
        },
      });
      this.list.push(...data.list);
      this.loading = false;
      if (this.list.length >= data.total) {
        this.finished = true;
      }
      this.page++;
    },
    gotoDetails(id) {
      this.$router.push({
        name: "Goods",
        params: {
          id,
        },
      });
    },
    goto(url) {
      this.$router.push(url);
    },
  },
  computed: {},
};
</script>
<style lang="scss" scoped>
.box {
  h1 {
    font-size: 18px;
    font-weight: 400;
  }
  .title {
    width: 191px;
    font-size: 16px;
    padding-left: 5px;
    box-sizing: border-box;
  }
  .price {
    width: 150px;
    padding-left: 7px;
    margin-top: 6px;
    margin-bottom: 6px;
    text-align: left;
    box-sizing: border-box;
    .new::before {
      content: "￥";
      color: red;
      font-size: 13px;
    }
    .new {
      font-size: 22px;
      color: rgb(250, 30, 50);
      font-weight: 600;
    }
    .old::before {
      content: "￥";
      font-size: 13px;
      color: rgb(153, 153, 153);
    }
    .old {
      color: rgb(153, 153, 153);
    }
  }
  .manjian {
    width: 70px;
    height: 20px;
    background-color: #fa1e32;
    color: #fff;
    font-size: 11px;
    border-radius: 10px;
    text-align: center;
    line-height: 20px;
    margin-left: 10px;
  }
}
</style>
